<template>
  <div class="confirm">
    <van-nav-bar
      title="确认订单"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      fixed
      class="navbar"
    />
    <!-- 选择地址 -->
    <div class="address card">
      <div class="icon">
        <van-icon name="location" color="#ff4a03" size=".3rem" />
      </div>
      <div class="add-center">
        <h3>
          <span>党乃茵</span>
          <i>13702054005</i>
        </h3>
        <p>回复的撒娇快发货快第三发的说法回复的撒娇快发货快第三发的说法</p>
        <div class="tips">收获不便时,可选择暂存服务</div>
      </div>
      <div class="add-right">
        <van-icon name="arrow" />
      </div>
    </div>
    <!-- 订单详情 -->
    <div class="card order">
      <van-card
        :num="item.godsNum"
        :price="item.marketPriceStr"
        :desc="item.introduce"
        :title="item.title"
        :thumb="item.imageUrl"
      >
        <template #tags>
          <van-tag plain type="danger">七天无理由退还</van-tag>
          <van-tag plain type="danger">{{ item.discountBenefitStr }}</van-tag>
        </template>
      </van-card>
      <div class="order-center">
        <div class="order-item">
          <h3>配送方式</h3>
          <h6>普通配送</h6>
          <div>
            <span>快递 免邮</span>
            <van-icon name="arrow" class="mid" />
          </div>
        </div>
        <div class="order-item">
          <h3>运险费</h3>
          <h6>退换货可赔付7元</h6>
          <div>
            <span>商家赠送</span>
            <van-icon name="arrow" class="mid" />
          </div>
        </div>
        <div class="order-item">
          <h3>店铺优惠</h3>
          <h6>暂无</h6>
          <div>
            <span></span>
            <van-icon name="arrow" class="mid" />
          </div>
        </div>
        <div class="order-item">
          <h3>开具发票</h3>
          <h6></h6>
          <div>
            <span>本次不开具发票</span>
            <van-icon name="arrow" class="mid" />
          </div>
        </div>
        <div class="order-item">
          <h3>订单备注</h3>
          <h6>
            <input type="text" placeholder="选填,请先和商家协商" />
          </h6>
          <div></div>
        </div>
        <div class="order-item3">
          <span class="num">共{{ item.godsNum }}件</span>
          <i class="xiaoji">小计：</i>
          <em>￥{{ priceTotal }}</em>
        </div>
      </div>
    </div>

    <van-submit-bar
      :price="priceAll"
      button-text="提交订单"
      @submit="onSubmit"
    />

    <!-- 付款 -->
    <van-action-sheet v-model="show" title="付款详情">
      <div class="content">￥{{ priceTotal }}</div>
      <van-cell-group>
        <van-cell title="支付宝账号" value="137****4005" />
        <van-cell title="付款方式" is-link value="余额宝" />
        <div class="btn">
          <van-button size="large" color="#1989fa" @click="payHandle"
            >立即付款</van-button
          >
        </div>
      </van-cell-group>
    </van-action-sheet>
  </div>
</template>

<script>
import Vue from "vue";
import { getGoodsList } from "@/api/goods.js";
import { addOrder } from "@/api/cart.js";
import {
  NavBar,
  SubmitBar,
  Icon,
  Card,
  Cell,
  CellGroup,
  ActionSheet,
  Button,
  Dialog,
} from "vant";

Vue.use(NavBar);
Vue.use(SubmitBar);
Vue.use(Icon);
Vue.use(Card);
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(ActionSheet);
Vue.use(Dialog);
export default {
  data() {
    return {
      item: {},
      orderList: [],
      priceAll: 0,
      show: false,
      priceTotal: 0,
    };
  },
  created() {
    this.goodsId = this.$route.query.goodsId;
    this.getGoods({ goodsId: this.goodsId });
  },
  computed: {},
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onSubmit() {
      this.show = true;
    },
    async getGoods(params) {
      let rs = await getGoodsList(params);
      this.item = rs.data[0];
      this.priceAll = this.item.godsNum * this.item.marketPrice * 100;
      this.priceTotal = (this.item.godsNum * this.item.marketPrice).toFixed(2);
    },
    //提交订单
    payHandle() {
      let list = [];
      list.push(this.item);
      Dialog.confirm({
        title: "确认付款",
        message: "￥" + this.priceTotal,
      })
        .then(() => {
          addOrder({
            list: list,
            status: 2,
          });
          console.log(list);
          this.$router.push("/redwine/user");
        })
        .catch(() => {
          addOrder({
            list: list,
            status: 1,
          });
          this.$router.push("/redwine/user");
        });
    },
  },
};
</script>

<style lang="stylus" scoped>
.confirm
    background #f2f2f2
    width 100%
    height 100%
    padding-top .05rem
    padding-bottom .5rem
    .card
        width 95%
        margin  0rem auto .1rem
        border-radius  .1rem
        background  #ffffff
    .address
        margin-top .56rem
        height 1.2rem
        display flex
        .icon
            width .4rem
            display flex
            align-items center
            justify-content center

        .add-center
            flex 1
            h3
                margin-top .1rem
                line-height .4rem
                i
                    color #aaaaaa
                    margin-left .1rem
                    font-weight normal
            p
                line-height .2rem
                font-size .13rem
            .tips
                margin-top .05rem
                color #ff0000
                font-size .12rem
        .add-right
            width .3rem
            display flex
            align-items center
            justify-content center

    .order
        height 3.5rem
        padding-top .1rem
        .van-card
            background #fff
        .order-center
            width 100%
            .order-item
                line-height .4rem
                display flex
                align-items center
                justify-content center
                font-size .12rem

                h3
                    width .7rem
                    margin-left .3rem
                    font-weight normal

                h6
                    flex 1
                    font-weight normal
                    color #b7b7b7
                    input
                        border 0
                div
                    text-align right
                    margin-right .1rem
                    width 1.2rem
                    span
                        margin-right .1rem
                    .mid
                        vertical-align middle


            .order-item3
                width 100%
                text-align right
                padding-right .1rem
                font-size .12rem
                .num
                    color #b6b6b6
                    margin-right .05rem
                em
                    color #db6824
  .content {
    width 100%
    height .3rem
    text-align center
    font-size .2rem
    margin-bottom .2rem
  }
  .btn{
      width 95%
      margin 1rem auto .3rem
  }
</style>
